<template>
	<view class="box bg-f7">
		<view class="padding-l-r-30 nav-box align-items-center bg-white">
			<view :class="{'active':navIndex == 1}" @click="navClick(1)">
				<text>健康科普学习</text>
			</view>
			<view class="nav-2" :class="{'active':navIndex == 2}" @click="navClick(2)">
				<text>医疗健康</text>
			</view>
		</view>
        <view class="bg-white align-items-center tab-box padding-l-r-30">
            <view v-for="(item,index) in typeList" :class="{'active':tabIndex == index,'margin-l-20':index }"  @click="getType(item,index)">
                {{item}}
            </view>
        </view>
        <view class="padding-25">
            <view  v-if="navIndex == 0">
                <view class="flex-wrap justifyContent-spaceBetween">
                    <view v-for="(item ,index) in popularizationList" class="list-box bg-white border-radio-14 margin-b-20">
                        <view class="img-box">
                            <image :src="item.imgSrc" mode="aspectFill"></image>
                        </view>
                        <view class="content-box">

                            <view>
                                <text class="only-1 fs-28 fw-b color-0">{{item.title}}</text>
                            </view>
                            <view class=" type-box">
                                <text v-for="e in item.type">{{e}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else>
                <view class="flex-wrap justifyContent-spaceBetween">
                    <view v-for="(item ,index) in popularizationList" @click="goDetails(item)" class="list-box bg-white border-radio-14 margin-b-20">
                        <view class="img-box">
                            <image :src="item.imgSrc" mode="aspectFill"></image>
                        </view>
                        <view class="content-box">

                            <view>
                                <text class="only-1 fs-28 fw-b color-0">{{item.title}}</text>
                            </view>
                            <view class=" type-box">
                                <text v-for="e in item.tag">{{e}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	import {learnList} from '@/api/healthPassbook'
    import {cateList} from "@/api/culturalPropaganda";

    import $baseUrl from "@/config/index.js"
    const BASE_URL = $baseUrl.baseUrl

    export default {
		data() {
			return {
                BASE_URL,
				navIndex:1,
                tabIndex:0,
                typeList:['医疗','体育','文化','旅游','饮食'],
                popularizationList:[ ],
                page:1,
                cate_name:'',
                isMore:false
			}
		},
        onLoad() {
            this.init()
            this.getCate()
        },
        //上拉加载函数
        onReachBottom(){
            if(this.isMore){
                setTimeout(()=>{
                    this.getLearnList()
                },100)
            }else{
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh () {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function () {
                uni.stopPullDownRefresh()
            }, 1000)
        },
		methods: {
            init(){
                this.initList()
            },
            getCate(){
                cateList({type:5}).then(res=>{
                    console.log(res)
                })
            },
            initList(){
                this.popularizationList =[]
                this.page = 1
                this.getLearnList()
            },
            getLearnList( ){
                let params = {
                    page:1,
                    limit:10,
                    type:this.navIndex,
                    cate_name:this.cate_name
                }
                let arr= []
                learnList(params).then(res=>{
                    if (res.code == 1){
                        res.data.forEach(e=>{
                            let tag =e.tag.split(',')
                            let obj = {
                                cate_name:e.cate_name,
                                content:e.content,
                                createtime:e.createtime,
                                title:e.title,
                                imgSrc:BASE_URL+e.image,
                                id:e.id,
                                tag
                            }
                            arr.push(obj)
                        })
                        this.popularizationList =this.popularizationList.concat(arr)
                        if(  res.data && res.data.length > 9){
                            this.page ++
                            this.isMore = true
                        }else {
                            this.isMore = false
                        }
                    }
                })
            },
			navClick(index){
				this.navIndex = index
                this.initList()
			},
            getType(item,index){
                this.cate_name = item
                this.tabIndex = index
                this.initList()
            },
			goDetails(item){
				uni.navigateTo({
					url:'/pages/video/details?id='+item.id
				})
			}
        }
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		height: 80rpx;
		text {
			font-size: 28rpx;
			color: #000;
		}
		.active {
			position: relative;
			font-weight: bold;
			&::after {
				content: "";
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				width: 30rpx;
				height: 4rpx;
				background: #000000;
				border-radius: 2rpx;
				transform: translateX(-50%);
			}
		}
		.nav-2 {
			margin-left: 50rpx;
		}
	}
	.list-box {
        width: 340rpx;
		.img-box {
            height: 200rpx;
			width: 100%;
            image {
                height: 100%;
            }
        }
        .content-box {
            padding: 16rpx 10rpx ;
        }
        .type-box {
           text{
               height: 34rpx;
               padding: 0 8rpx;
               background: rgba(67,171,196,0.08);
               line-height:  34rpx;
               border-radius: 4rpx;
               color:  #43ABC4;
               font-size: 22rpx;
               border: 1px solid #43ABC4;
           }
        }
	}
    .tab-box {
        height: 70rpx;
        view {
            width: 100rpx;
            height: 50rpx;
            background: #F7F7F7;
            border-radius: 25rpx;
            font-size: 26rpx;
            color: #000;
            text-align: center;
            line-height: 50rpx;
            &.active {
                border: 1px solid #43ABC4;
                color:  #43ABC4;
            }
        }
    }
</style>
